<!DOCTYPE html>
<html>
<head>
<title>SMART - 菜单管理</title>
<jsp:include page="../include/head.jsp" />
</head>
<body>
   <div class="wrapper">
      <!-- 导航区 -->
      <jsp:include page="../include/topnav.jsp" />
      <!-- 左侧菜单区 -->
      <jsp:include page="../include/menu.jsp">
      	<jsp:param value="" name="selectedItem" />
      </jsp:include>
      <!-- 右侧边栏 -->
      <jsp:include page="../include/right.jsp" />
      <!-- Main section-->
      <section>
         <!-- Page content-->
         <div class="content-wrapper">
            <div class="content-heading">菜单列表</div>
            <div class="panel panel-default">
				<div class="panel-body">
				<div style="margin:20px 0;">
					<a href="javascript:void(0)" class="btn btn-primary" onclick="edit()">编辑</a>
					<a href="javascript:void(0)" class="btn btn-primary" onclick="save()"">增加子菜单</a>
					<a href="javascript:void(0)" class="btn btn-primary" onclick="del()">删除</a>
				</div>
				<ul id="tg" style="width:auto;height:auto" class="table-responsive"></ul>
				</div>
			</div>
         </div>
      </section>
      <jsp:include page="../include/footer.jsp" />
   </div>
   <!-- modal s-->
		<div class="modal fade" id="myModal">
		  <div class="modal-dialog" style="margin-top:160px;">
		    <div class="modal-content">
		      <!-- 模态框主体 -->
		      <div class="modal-body" id="app">
		      	<form role="form" action="admin/menu/edit2" method="post" class="form-horizontal">
						<c:if test="${obj!=null && obj.id ne null}">
							<input type="hidden" name="id" value="${obj.id}" id="diologId"/>
						</c:if>
						<c:if test="${obj!=null && obj.parent ne null}">
							<div class="form-group">
								<label for="title" class="col-sm-5 control-label">父菜单</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" disabled value="${obj.parent.name}" />
									<input type="hidden" name="parentId" value="${obj.parentId}" />
									<input type="hidden" name="level" value="${obj.parent.level + 1}" />
								</div>
							</div>
						</c:if>
						<div class="form-group">
							<label for="title" class="col-sm-5 control-label">名称(即菜单文字)</label>
							<div class="col-sm-7">
								<c:if test="${obj!=null && obj.id ne null}">
									<!-- 做父节点 -->
									<input type="hidden" name="parentId" value="${obj.id}" id="parentId"/>
								</c:if>
								<input type="text" class="form-control" id="name" name="name" value="${obj.name}" />
								<input type="hidden" class="form-control" id="id" name="id" value="${obj.id}" />
							</div>
						</div>
						<div class="form-group">
							<label for="url" class="col-sm-5 control-label">URL(若无跳转则填#)</label>
						<div class="col-sm-7">
								<input type="text" class="form-control" value="${obj.url}" name="url" id="url"/ style="margin-bottom:-15px;"><br/>
								  <div class="">
								    <div class="input-group">
								    <%-- <input type="hidden" class="form-control" id="url" name="url" value="${obj.url}" /> --%>
								      <input type="text" class="form-control" placeholder="查找资讯" id="searchTitle">
								      <span class="input-group-btn">
								        <button class="btn btn-default" type="button" id="searchBtn" v-on:click="search">查找</button>
								      </span>
								      <span class="input-group-btn">
								      	<select class="btn btn-default"  id="infoSelectBtn">
								      		<option value="#">查找选择↓</option>
								      		<option v-for="info in aticList"  :value="'info/'+info.id+'.html'" v-on:click="slectInfo('info/'+info.id+'.html',info.title)">{{info.title}}</option>
								      	</select>
								      </span>
								    </div>
								  </div>
							</div>
						</div>	
						<div class="form-group">
							<label for="attr1" class="col-sm-5 control-label">附加属性1(仅为一级菜单设计)</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="attr1" name="attr1" value="${obj.attr1}" />
							</div>
						</div>
						<div class="form-group">
							<label for="attr2" class="col-sm-5 control-label">附加属性2(仅为一级菜单设计)</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="attr2" name="attr2" value="${obj.attr2}" />
							</div>
						</div>
						<div class="form-group">
							<label for="sort" class="col-sm-5 control-label">排序(同级菜单数字越大越靠前)</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="sort" name="sort" value="${obj.sort}" />
							</div>
						</div>
						
						<div class="form-group" >
							<div class="col-sm-5"></div>
							<div class="col-sm-7">
								<button type="submit" class="btn btn-primary">提交</button>
								<a href="admin/menu/list?parentId=${obj.parent.id}" class="btn btn-primary">返回列表</a>	
							</div>
						</div>
					</form>
		      </div>
   <!-- modal e-->
   <jsp:include page="../include/script.jsp" />
</body>
</html>
<script>
$('#mainMenu li').removeClass('active');
$('#menuMenu').addClass('active');

	var tree = {
		id : '',
		name : '',
		url : '',
		sort : '',
		level : '',
		state : '',
		checked : '',
		attributes : '',
		children : ''
	}
	//此处是把后台传过来的json数据转成easyui规定的格式  
	function bl(item) {
		var tree = new Object();
		tree.id = item.id;
		tree.name = item.name;
		tree.url = item.url;
		tree.sort = item.sort;
		tree.level = item.level;
		tree.state = 'open';
		tree.checked = 'false';
		tree.attributes = item.url;
		//alert(item);
		if (item.children!='undefined' && item.children!=null && item.children.length != 0) {
			tree.children = jsonbl(item.children);
		} else {
			tree.children = [];
		}
		return tree;
	}
	function jsonbl(data) {
		var easyTree = [];
		$.each(data, function(index, item) {
			easyTree[index] = bl(item);
		});
		return easyTree;
	}

	$('#tg').treegrid({
		url : 'menu/initList',
		loadFilter : function(data) {
			console.log(data);
			return data;
		},
		idField:'id',
	    treeField:'name',
	    columns:[[
			{title:'菜单名',field:'name',width:180},
			{title:'ID',field:'id',width:180},
			{title:'url',field:'url',width:300},
			{title:'排序',field:'sort',width:300},
			{title:'pid',field:'parentId',width:300},
			{title:'菜单级别',field:'level',width:300},
	    ]]
	});
	var editingId;
	function edit(){
		var row = $('#tg').treegrid('getSelected');
		if (row){
			editingId = row.id
			//alert(editingId);
			$('#tg').treegrid('beginEdit', editingId);
			
			$.ajax({
				url: 'admin/menu/getInfo?id=' + editingId,
				method: 'get',
				success: function(data){
					$("#id").val(editingId);
					$("#name").val(data.name);
					$("#code").val(data.code);
					$("#url").val(data.url);
					$("#attr1").val(data.attr1);
					$("#attr2").val(data.attr2);
					$("#sort").val(data.sort);
				}
			});
			$('#myModal').modal({});
		}else{
			alert('请先选择一个菜单');
		}
	}
	function save(){
			var row = $('#tg').treegrid('getSelected');
			if (row){
				editingId = row.id
				//alert(editingId);
				console.log(editingId);
				$('#tg').treegrid('beginEdit', editingId);
				//改字段传后台,只传递parentId过去
				$("#id").attr("name","parentId");
				$("#id").attr("id","parentId");
				$("#parentId").val(editingId);
				$('#myModal').modal({});
			}else{
				alert('请先选择一个父菜单');
			}
	}
	function cancel(){
		if (editingId != undefined){
			$('#tg').treegrid('cancelEdit', editingId);
			editingId = undefined;
		}
	}
	function del(){
		var row = $('#tg').treegrid('getSelected');
		if (row){
			editingId = row.id
			if(!confirm("确定删除？")){
				return;
			}
			$.ajax({
				url: 'admin/menu/delete?id=' + editingId,
				method: 'get',
				success: function(){
					console.log('delete menu success!id='+editingId);
					window.location.reload();
				},
				error: function(){
					alert('删除失败, 请确保下属子菜单已经全部删除.');
				}
			})
		}else{
			alert('请先选择一个菜单');
		}
	}
	var vm = new Vue({
		el : '#app',
		data : {
			aticList:{},
			title:null
		},
		created : function() {
			
		},
		methods : {
			search:function(){
				var that=this;
				var title=$("#searchTitle").val();
				//alert(name);
				$.ajax({
					url: 'admin/info/findByName',
					method: 'post',
					data:{title:title},
					success: function(data){
						that.aticList=data;	
					}
				});
			},
			slectInfo:function(url,title){
				var that=this;
				//alert(url);
				$("#url").val(url);
				$("#searchTitle").attr('placeholder',title);
				that.title=title;
				//alert($("#url").val());
			},
		},
		filters : {
			formatDate : function(time) {
	            var date = new Date(time);
	            return formatDate1(date); 
	        },
			
		}
	})


	$("#infoSelectBtn").change(function(){
		console.log("222")
		var url=$(this).children('option:selected').val();
		$("#url").val(url);
		//$("#searchTitle").attr('placeholder',title);
	});
	
</script>